<template>
  <div>
    <ablumlist :albumList="albumList" :allList="allList"></ablumlist>
    <el-pagination
      v-model:currentPage="currentPage"
      :page-sizes="[35, 70, 105, 140]"
      :page-size="35"
      background
      layout="prev, pager, next"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getAlbum, getalbumAll } from "@/api/singer";
import ablumlist from "@/components/ablumlist.vue";
export default {
  components: { ablumlist },
  data() {
    return {
      currentPage: 1,
      limit: 35,
      offset: 0,
      albumList: [],
      allList: [],
    };
  },
  created() {
    this.getalbum();
    this.getallalbum();
  },
  methods: {
    async getalbum() {
      let res = await getAlbum();
      this.albumList = res.albums;
    },
    async getallalbum() {
         let offset = (this.currentPage - 1) * this.limit;
      let params = {
        limit: this.limit,
        offset,
      };
      let res = await getalbumAll(params);
      this.allList = res.albums;
    },
    handleSizeChange(val) {
      console.log(`每页条数：${val}`);
      this.limit = val;
      this.getallalbum();
    },
    handleCurrentChange(val) {
      console.log(`当前页码: ${val}`);
      this.currentPage = val;
      this.getallalbum();
    },
  },
};
</script>

<style lang="less" scoped>
</style>